import { BottomNavigation, BottomNavigationAction } from "@mui/material";
import React from "react";
import homeActiveIcon from "@/assets/images/tabbar/home_1.png"; // 激活的home
import homeIcon from "@/assets/images/tabbar/home_2.png"; // 未激活的home
import fastIcon from "@/assets/images/tabbar/fast.png"; // fast只有这一个
import myActiveIcon from "@/assets/images/tabbar/my_1.png"; // 我的 激活图标
import myIcon from "@/assets/images/tabbar/my_2.png"; // 我的 未激活图标

export default function BottomNav() {
  return (
    <div>
      <BottomNavigation showLabels>
        <BottomNavigationAction
          label="首页"
          icon={
            <NavIcon
              isActive={false}
              ActionIcon={homeActiveIcon}
              Icon={homeIcon}
            />
          }
        />
        <BottomNavigationAction
          label="快速刷题"
          icon={
            <NavIcon isActive={false} ActionIcon={fastIcon} Icon={fastIcon} />
          }
        />
        <BottomNavigationAction
          label="我的"
          icon={
            <NavIcon isActive={false} ActionIcon={myActiveIcon} Icon={myIcon} />
          }
        />
      </BottomNavigation>
    </div>
  );
}

interface NavIconProp {
  isActive: boolean;
  ActionIcon: string;
  Icon: string;
}

function NavIcon(props: NavIconProp) {
  if (props.isActive) {
    return (
      <div>
        <img src={props.ActionIcon} alt="" />
      </div>
    );
  } else {
    return (
      <div>
        <img src={props.Icon} alt="" />
      </div>
    );
  }
}
//  onChange={(event, newValue) => {
//     setValue(newValue);
// }}
